<template>
  <div id="perdetails">
    <div class="promptText" v-if="isShow1">
      <div class="left">
        <i class="fa fa-volume-down" aria-hidden="true"></i>
        <p><marquee loop="infinite" scrollamount="4">您有一份新人礼未领取!</marquee></p>
        <!-- <p class="slide1">您有一份新人礼未领取!</p> -->
        <!-- <p class="slide2">您有一份新人礼未领取!</p> -->
      </div>
      <div class="right">
        <a href="javascript:;" class="txt"  @click="routeto(routerTo)">去领取></a>
      </div>
    </div>
    <div class="information">
      <ul>
        <li><span class="left headerpic">头像</span><span class="right pic"><img :src="headimgurl"></span></li>
        <li><span class="left">昵称</span><span class="right txt">{{ nickname }}</span></li>
        <li><span class="left">手机号码</span><span class="right txt">{{mobile }}</span></li>
        <li><span class="left">会员等级</span><span class="right txt">{{vipLevel}}</span></li>
      </ul>
    </div>
    <p class="msg">{{titleMsg}}</p>
    <div class="setInfo">
      <group labelAlign="right" labelWidth="70px" labelMarginRight="5px">
        <div class="uName">
          <x-input class="txtleft weui-cell__bd" @on-blur="onBlur" @on-focus="onFocus" :placeholder=" placeholder" title="姓名" v-model="username" ref="nameref"></x-input>
          <button class="surename" v-show="isShow">确定</button>
        </div>
        <datetime class="txtleft" title="生日" v-if="timeShow1" :max-year="2017"  :min-year="1928"  format="YYYY" :display-format="resetDate" v-model="userbirth1" ></datetime>
        <datetime class="txtleft" title="生日" v-if="timeShow2" :max-year="2017"  :min-year="1928"  format="YYYY-MM-DD" :default-selected-value="timeDate" v-model="userbirth" ></datetime>
        <selector direction="center"  class="txtleft" title="性别" :options="usersexList" v-model="usersex" required="required" ref="sexref"></selector>
        <x-address class="txtleft" title="省市" :list="ChinaAddressData" value-text-align="right" v-model="address"></x-address>
        <li class="hobby" v-model="show" @click="show = true">
          <div class="left1" >兴趣爱好</div>
          <div class="right1">
            <span v-for="item in interestList">{{item}} </span>
          </div>
        </li>
        <div>
          <popup v-model="show" position="left" width="100%" :show-mask="false">
            <div class="position-horizontal-demo">
              <div class="int-top">
                <p class="log-pic"><img src="../../assets/images/logo.png"></p>
                <p class="title1">欢迎加入李宁大家庭</p>
                <p class="title2">请选择您喜欢的兴趣爱好</p>
              </div>
              <!-- <span class="vux-close" @click="show8 = false"></span> -->
              <div class="interests-List">
                <grid>
                  <grid-item v-for="(item, ikey) in imglist" :key="ikey" :bool="item.bool" @on-item-click="onItemClick(ikey)">
                    <img slot="icon" :src="item.url1">
                    <span >{{item.title}}</span>
                  </grid-item>
                </grid>
              </div>
              <box gap="10px 10px">
                <x-button type="primary" @click.native="submit">确定</x-button>
                <x-button type="default" @click.native="closeModal">取消</x-button>
              </box>
            </div>
          </popup>
        </div>
      </group>
      <div >
        <alert v-model="alert" >{{title}}</alert>
      </div>
      <box gap="20px 20px">
        <x-button type="primary" @click.native="saveCustInfo">保存</x-button>
      </box>
      <App-Mask :mask="mask"></App-Mask>
      <loading :show="isLoading"></loading>
    </div>
  </div>
</template>
<script>
import AppMask from '../../components/mask/Mask'
import Box from 'vux/src/components/box'
import XInput from 'vux/src/components/x-input'
import XSwitch from 'vux/src/components/x-switch'
import XButton from 'vux/src/components/x-button'
import Group from 'vux/src/components/group'
import Popup from 'vux/src/components/popup'
import Selector from 'vux/src/components/selector'
import Datetime from 'vux/src/components/datetime'
import XAddress from 'vux/src/components/x-address'
import { Loading, Grid, GridItem, ChinaAddressV3Data, Alert } from 'vux'

let timeDate = Number(new Date().toLocaleDateString().replace('/', '-').replace('/', '-').substr(0, 4)) - 27 + new Date().toLocaleDateString().replace('/', '-').replace('/', '-').substr(4)
let urlList1 = ['./static/images/01.png',
  './static/images/11.png',
  './static/images/21.png',
  './static/images/31.png',
  './static/images/41.png',
  './static/images/51.png',
  './static/images/61.png',
  './static/images/71.png',
  './static/images/81.png']
let urlList2 = ['./static/images/00.png',
  './static/images/10.png',
  './static/images/20.png',
  './static/images/30.png',
  './static/images/40.png',
  './static/images/50.png',
  './static/images/60.png',
  './static/images/70.png',
  './static/images/80.png']
const imglist = [
  {
    bool: true,
    url1: './static//images/00.png',
    title: '健身'
  },
  {
    bool: true,
    url1: './static/images/10.png',
    title: '篮球'
  },
  {
    bool: true,
    url1: './static/images/20.png',
    title: '攀岩'
  },
  {
    bool: true,
    url1: './static/images/30.png',
    title: '跑步'
  },
  {
    bool: true,
    url1: './static/images/40.png',
    title: '乒乓球'
  },
  {
    bool: true,
    url1: './static/images/50.png',
    title: '网球'
  },
  {
    bool: true,
    url1: './static/images/60.png',
    title: '瑜伽'
  },
  {
    bool: true,
    url1: './static/images/70.png',
    title: '羽毛球'
  },
  {
    bool: true,
    url1: './static/images/80.png',
    title: '足球'
  }
]
export default {
  name: 'perdetails',
  components: {
    Box,
    Loading,
    XInput,
    XButton,
    Group,
    Selector,
    Datetime,
    XAddress,
    ChinaAddressV3Data,
    XSwitch,
    Popup,
    Grid,
    GridItem,
    Alert,
    AppMask
  },
  data () {
    return {
      timeDate: timeDate,
      titleMsg: '',
      isLoading: false,
      timeShow1: false,
      timeShow2: false,
      routerTo: '',
      alert: false,
      title: '',
      vipLevel: '',
      urlList1: urlList1,
      urlList2: urlList2,
      imglist: imglist,
      interestList: [],
      show: false,
      mobile: '',
      username: '',
      placeholder: '',
      userbirth: '',
      userbirth1: '',
      birthday: '',
      usersex: '',
      address: [''],
      headimgurl: '',
      nickname: '',
      ChinaAddressData: ChinaAddressV3Data,
      usersexList: [{
        key: 1,
        value: '男'
      }, {
        key: 2,
        value: '女'
      }],
      isShow: false,
      isShow1: false,
      mask: {
        'isShow1': false,
        'isShow2': false,
        'isShow3': false
      }
    }
  },
  created () {
    console.log(this.timeDate)
    this.judgeGetNewCustAuthOrNot()
    this.getInfo()
    // this.resetDate()
  },
  mounted () {
    if (/Android [4-8]/.test(navigator.appVersion)) {
      window.addEventListener('resize', function () {
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          window.setTimeout(function () {
            document.activeElement.scrollIntoViewIfNeeded()
          }, 0)
        }
      })
    }
  },
  methods: {
    resetDate (date) {
      return date + this.userbirth.substr(4, this.userbirth.length)
    },
    // 判断用户是否有新人礼
    judgeGetNewCustAuthOrNot () {
      this.$axios.post(this.apidomain + '/api/giftCert/judgeGetNewCustAuthOrNot/' + this.getCookie('appid'), {
        openId: this.getCookie('openid')
      })
      .then((response) => {
        // 用户有新人礼
        if (response.data.errorCode === '0') {
          this.isShow1 = true
          this.routerTo = 'usersetting'
        } else if (response.data.errorCode === '-1') {
          // 用户没有新人礼
          // 判断实物是否领取
          this.$axios.post(this.apidomain + '/api/giftCert/selectCustNotGetGoods/' + this.getCookie('appid'), {
            openId: this.getCookie('openid')
          })
          .then((response) => {
            if (response.data.errorCode === '0') {
              if (response.data.data !== null) {
                this.isShow1 = true
                this.routerTo = 'newgift'
              } else {
                this.isShow1 = false
              }
            }
          })
          .catch((error) => {
            console.log(error)
          })
        }
      })
      .catch((error) => {
        console.log(error)
      })
    },
    // 获取用户信息
    getInfo () {
      // this.setCookie('openid', 'o02XP1eVG4VbbEveY4bpvqzB--uk')
      // this.setCookie('appid', 'wxd3150fe826ac186f')
      this.$axios.post(this.apidomain + '/api/cust/queryCustInfo/' + this.getCookie('appid'), {
        wxOpenId: this.getCookie('openid')
      })
      .then((response) => {
        this.username = response.data.data.name
        this.usersex = response.data.data.gender
        this.mobile = response.data.data.mobile
        this.address[0] = response.data.data.province
        this.address[1] = response.data.data.city
        this.address[2] = response.data.data.district
        this.address = this.address.slice()
        this.nickname = response.data.data.nick_name
        this.headimgurl = response.data.data.head_img_url
        this.userbirth = response.data.data.birthday
        if (response.data.data.birthday === '') {
          this.timeShow2 = true
        } else {
          this.timeShow1 = true
          this.userbirth1 = this.userbirth.substr(0, 4)
        }
        if (response.data.data.vipLevel === '非会员') {
          this.vipLevel = '-'
          this.titleMsg = '以下信息可完善'
        } else {
          this.vipLevel = response.data.data.vipLevel
          this.titleMsg = '以下信息可修改'
        }
        this.interestList = response.data.data.hobby.split(',')
        // this.imglist.push(response.data.data.hobby.split(','))
        for (let i = 0; i < this.imglist.length; i++) {
          for (let j = 0; j < this.interestList.length; j++) {
            if (this.imglist[i].title === this.interestList[j]) {
              this.imglist[i].url1 = this.urlList1[i]
              this.imglist[i].bool = false
            }
          }
        }
        return this.imglist
      })
      .catch((error) => {
        console.log(error)
      })
    },
    // 提交用户信息
    saveCustInfo () {
      window.zhuge.track('Click', {
        '事件名称': '会员中心-个人信息-保存-点击',
        'OpenID': this.getCookie('openid'),
        '姓名': this.Name,
        '时间': new Date().toLocaleString()
      })
      this.isLoading = true
      if (this.timeShow1 === true) {
        this.birthday = this.userbirth1 + this.userbirth.substr(4, this.userbirth.length)
      }
      if (this.timeShow2 === true) {
        this.birthday = this.userbirth
      }
      // console.log(this.userbirth1 + this.userbirth.substr(4, this.userbirth.length))
      this.$axios.post(this.apidomain + '/api/cust/saveCustInfo/' + this.getCookie('appid'), {
        openId: this.getCookie('openid'),
        name: this.username,
        gender: this.usersex.toString(),
        source: 0,
        birthday: this.birthday,
        province: this.address[0],
        city: this.address[1],
        district: this.address[2],
        hobby: this.interestList.toString()
      })
      .then((response) => {
        if (response.data.errorCode === '0') {
          this.alert = true
          this.title = '保存成功'
          this.isLoading = false
        } else {
          this.title = '保存失败'
          this.isLoading = false
        }
      })
      .catch((error) => {
        console.log(error)
        this.isLoading = false
      })
    },
    getValid1 () {
      this.valid1 = this.$refs.input01.valid
    },
    getValid2 () {
      this.valid2 = this.$refs.input02.valid
    },
    change (val) {
      console.log(val)
    },
    onBlur (val) {
      this.isShow = false
      document.getElementsByClassName('weui-input').item(0).style.textAlign = 'right'
      this.placeholder = ''
      // console.log(document.getElementsByClassName('weui-input').item(0))
      // console.log('on blur', val)
    },
    onFocus (val, $event) {
      document.getElementsByClassName('weui-input').item(0).style.textAlign = 'left'
      // this.username = ' '
      this.placeholder = '请输入姓名或昵称'
      this.isShow = true
      // console.log('on focus', val, $event)
      return this.placeholder
    },
    onEnter (val) {
      console.log('click enter!', val)
    },
    onItemClick (ikey) {
      if (this.imglist[ikey].bool === false) {
        this.imglist[ikey].url1 = this.urlList2[ikey]
        this.imglist[ikey].bool = true
      } else {
        this.imglist[ikey].url1 = this.urlList1[ikey]
        this.imglist[ikey].bool = false
      }
      // console.log(this.imglist[ikey].bool)
      return this.imglist
    },
    submit () {
      this.interestList.length = 0
      this.show = false
      for (let i = 0; i < this.imglist.length; i++) {
        if (this.imglist[i].bool === false) {
          this.interestList.push(this.imglist[i].title)
        }
      }
      // console.log(this.interestList)
      return this.interestList
    },
    // 关闭模态框
    closeModal () {
      console.log(this.interestList)
      for (let i = 0; i < this.imglist.length; i++) {
        if (this.interestList.indexOf(this.imglist[i].title) > -1) {
          this.imglist[i].url1 = this.urlList1[i]
          this.imglist[i].bool = false
        } else {
          this.imglist[i].url1 = this.urlList2[i]
          this.imglist[i].bool = true
        }
      }
      this.show = false
      return this.imglist
    }
  },
  watch: {
    show10 (val) {
      if (val) {
        setTimeout(() => {
          this.show10 = false
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less">
@import "../../assets/less/perdetails/perdetails.less";
// @import '~vux/src/styles/close.less';
</style>
